﻿::deep .action {
    cursor: pointer;
    font-size: 0;
    z-index: 1;
}

::deep .node-action-icon {
    width: 16px;
    height: 16px;
    margin: 0;
}

.rule-node {
    display: flex;
    user-select: none;
}

    .rule-node.last-rule:not(.has-child-rules),
    .rule-node.last-rule.has-child-rules.collapse-rule {
        padding-bottom: 100px;
    }

    .rule-node.disabled-rule .main-node .node-content {
        opacity: 0.5;
    }

.main-node {
    display: flex;
    flex-direction: column;
    flex-basis: 200px;
    min-width: 200px;
}

    .main-node .node-content-container {
        position: relative;
    }

        .main-node .node-content-container .node-content {
            display: flex;
            border-width: 1px;
            border-style: solid;
            border-radius: 4px;
            align-items: center;
            justify-content: center;
            min-height: 40px;
        }

            .main-node .node-content-container .node-content .node-description {
                padding: 6px;
            }

        .main-node .node-content-container ::deep .action {
            position: absolute;
        }

            .main-node .node-content-container ::deep .action.validation-result-action {
                top: 3px;
                right: 3px;
            }

            .main-node .node-content-container ::deep .action.menu-action {
                right: 4px;
                bottom: 0;
            }

            .main-node .node-content-container ::deep .action.collapse-action {
                right: -20px;
                top: 12px;
            }

            .main-node .node-content-container ::deep .action.add-rule-top {
                top: -20px;
                left: calc(50% - 8px);
            }

            .main-node .node-content-container ::deep .action.add-rule-bottom {
                bottom: -20px;
                left: calc(50% - 8px);
            }

            .main-node .node-content-container ::deep .action.add-rule-left {
                left: -20px;
                top: calc(50% - 8px);
            }

            .main-node .node-content-container ::deep .action.add-rule-right {
                right: -20px;
                top: calc(50% - 8px);
            }

    .main-node .node-line {
        position: relative;
        flex-grow: 1;
        min-height: 60px;
    }

        .main-node .node-line .v-line {
            position: absolute;
            left: calc(50% - 1px);
            top: 2px;
            bottom: 2px;
            width: 2px;
            background-color: #BDC3C7;
        }

        .main-node .node-line ::deep .action.insert-rule-action {
            display: flex;
            position: absolute;
            left: calc(50% - 10px);
            top: calc(50% - 10px);
            width: 20px;
            height: 20px;
            align-items: center;
            justify-content: center;
            background-color: white;
        }

.child-nodes {
    display: flex;
    align-items: start;
}

    .child-nodes .node-line {
        position: relative;
        min-width: 120px;
        height: 40px;
    }

        .child-nodes .node-line .h-line {
            position: absolute;
            left: 24px;
            top: calc(50% - 1px);
            right: 24px;
            height: 2px;
            background-color: #2980B9;
        }

        .child-nodes .node-line .action {
            position: absolute;
            display: flex;
            justify-content: center;
            width: calc(100% - 50px);
            left: 24px;
            font-size: 0;
        }

            .child-nodes .node-line .action .action-text {
                font-size: 12px;
                cursor: pointer;
            }

        .child-nodes .node-line .operator .operator-text {
            border-radius: 10px;
            padding: 0px 3px;
            color: white;
        }

            .child-nodes .node-line .operator .operator-text.and {
                background: #3498DB;
            }

            .child-nodes .node-line .operator .operator-text.or {
                background: #E67E22;
            }

        .child-nodes .node-line .output-mode {
            left: 24px;
            bottom: 0;
        }

            .child-nodes .node-line .output-mode .output-mode-text {
                border-radius: 4px;
                padding: 0px 4px;
                cursor: pointer;
            }

                .child-nodes .node-line .output-mode .output-mode-text.all {
                    color: #7F8C8D;
                }

                .child-nodes .node-line .output-mode .output-mode-text.one {
                    color: #D35400;
                }
